<template>
  <div class="toolbar-ribbon">
    <!-- 标签页导航 -->
    <Tabs
      :items="tabsAsItems"
      :active-tab="activeTabId"
      variant="underline"
      size="medium"
      align="left"
      @tab-change="handleTabChange"
    />

    <!-- 功能区内容 -->
    <div class="ribbon-content">
      <!-- Home 标签页 -->
      <template v-if="activeTabId === 'home'">
        <!-- 历史组 - 网格布局 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div
            class="ribbon-group-grid"
            style="grid-template-columns: repeat(2, 1fr)"
          >
            <Undo :hide-text="true" />
            <Redo :hide-text="true" />
            <FormatBrush :hide-text="true" />
            <ClearFormat :hide-text="true" />
          </div>
        </div>

        <!-- 字体组 - 列布局 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-columns">
            <div class="ribbon-group-column">
              <FontFamily :hide-text="true" />
              <FontSize :hide-text="true" />
              <FontIncrease :hide-text="true" />
              <FontDecrease :hide-text="true" />
            </div>
            <div class="ribbon-group-column">
              <Bold :hide-text="true" />
              <Italic :hide-text="true" />
              <Underline :hide-text="true" />
              <Strike :hide-text="true" />
              <Superscript :hide-text="true" />
              <Subscript :hide-text="true" />
              <TextColor :hide-text="true" />
              <Highlight :hide-text="true" />
            </div>
          </div>
        </div>

        <!-- 段落组 - 列布局 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-columns">
            <div class="ribbon-group-column">
              <OrderedList :hide-text="true" />
              <BulletList :hide-text="true" />
              <TaskList :hide-text="true" />
              <IndentIncrease :hide-text="true" />
              <IndentDecrease :hide-text="true" />
              <LineHeight :hide-text="true" />
            </div>
            <div class="ribbon-group-column">
              <AlignLeft :hide-text="true" />
              <AlignCenter :hide-text="true" />
              <AlignRight :hide-text="true" />
              <AlignJustify :hide-text="true" />
              <AlignDistributed :hide-text="true" />
              <CodeBlock :hide-text="true" />
              <Blockquote :hide-text="true" />
            </div>
          </div>
        </div>

        <!-- 样式组 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-content">
            <Heading :hide-text="true" />
          </div>
        </div>
      </template>

      <!-- Insert 标签页 -->
      <template v-if="activeTabId === 'insert'">
        <!-- 插入组 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-content">
            <Image :hide-text="false" :large-icon="true" />
            <Link :hide-text="false" :large-icon="true" />
            <HorizontalRule :hide-text="false" :large-icon="true" />
            <PageBreak :hide-text="false" :large-icon="true" />
            <CodeBlock :hide-text="false" :large-icon="true" />
            <Blockquote :hide-text="false" :large-icon="true" />
            <Code :hide-text="false" :large-icon="true" />
          </div>
        </div>

        <!-- 批注组 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-content">
            <Comment :hide-text="false" :large-icon="true" />
          </div>
        </div>

        <!-- 目录组 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-content">
            <TableOfContents :hide-text="false" :large-icon="true" />
          </div>
        </div>

        <!-- 导入导出组 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-content">
            <ImportWord :hide-text="false" :large-icon="true" />
            <ExportWord :hide-text="false" :large-icon="true" />
          </div>
        </div>
      </template>

      <!-- Table 标签页 -->
      <template v-if="activeTabId === 'table'">
        <!-- 表格组 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-content">
            <InsertTable :hide-text="false" :large-icon="true" />
            <AddRowBefore :hide-text="false" :large-icon="true" />
            <AddRowAfter :hide-text="false" :large-icon="true" />
            <DeleteRow :hide-text="false" :large-icon="true" />
            <AddColumnBefore :hide-text="false" :large-icon="true" />
            <AddColumnAfter :hide-text="false" :large-icon="true" />
            <DeleteColumn :hide-text="false" :large-icon="true" />
            <DeleteTable :hide-text="false" :large-icon="true" />
            <MergeCells :hide-text="false" :large-icon="true" />
            <SplitCells :hide-text="false" :large-icon="true" />
            <CellBackgroundColor :hide-text="false" :large-icon="true" />
            <CellTextColor :hide-text="false" :large-icon="true" />
            <CellAlign :hide-text="false" :large-icon="true" />
          </div>
        </div>
      </template>

      <!-- Page 标签页 -->
      <template v-if="activeTabId === 'page'">
        <!-- 分页组 -->
        <div class="ribbon-group ribbon-group-with-divider">
          <div class="ribbon-group-content">
            <PageBreak :hide-text="false" :large-icon="true" />
            <PageMargin :hide-text="false" :large-icon="true" />
            <PageSize :hide-text="false" :large-icon="true" />
            <PageOrientation :hide-text="false" :large-icon="true" />
            <PageBackground :hide-text="false" :large-icon="true" />
            <PageWatermark :hide-text="false" :large-icon="true" />
          </div>
        </div>
      </template>

      <!-- 模式切换按钮 -->
      <div class="ribbon-group ribbon-mode-switcher">
        <ModeSwitcher
          :current-mode="currentMode"
          @mode-change="handleModeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import ModeSwitcher from "../components/ModeSwitcher.vue";
import { Tabs } from "../../../tabs";
import type { TabItem } from "../../../tabs/src/types";
import { TOOLBAR_TABS } from "../../../../config/constants";

// 导入所有工具栏组件
import Undo from "../../../menus/toolbar/base/Undo.vue";
import Redo from "../../../menus/toolbar/base/Redo.vue";
import Image from "../../../menus/toolbar/base/Image.vue";
import FormatBrush from "../../../menus/toolbar/base/FormatBrush.vue";
import ClearFormat from "../../../menus/toolbar/base/ClearFormat.vue";
import FontFamily from "../../../menus/toolbar/base/FontFamily.vue";
import FontSize from "../../../menus/toolbar/base/FontSize.vue";
import FontIncrease from "../../../menus/toolbar/base/FontIncrease.vue";
import FontDecrease from "../../../menus/toolbar/base/FontDecrease.vue";
import Bold from "../../../menus/toolbar/base/Bold.vue";
import Italic from "../../../menus/toolbar/base/Italic.vue";
import Underline from "../../../menus/toolbar/base/Underline.vue";
import Strike from "../../../menus/toolbar/base/Strike.vue";
import Superscript from "../../../menus/toolbar/base/Superscript.vue";
import Subscript from "../../../menus/toolbar/base/Subscript.vue";
import TextColor from "../../../menus/toolbar/base/TextColor.vue";
import Highlight from "../../../menus/toolbar/base/Highlight.vue";
import BulletList from "../../../menus/toolbar/base/BulletList.vue";
import OrderedList from "../../../menus/toolbar/base/OrderedList.vue";
import TaskList from "../../../menus/toolbar/base/TaskList.vue";
import IndentIncrease from "../../../menus/toolbar/base/IndentIncrease.vue";
import IndentDecrease from "../../../menus/toolbar/base/IndentDecrease.vue";
import LineHeight from "../../../menus/toolbar/base/LineHeight.vue";
import AlignLeft from "../../../menus/toolbar/base/AlignLeft.vue";
import AlignCenter from "../../../menus/toolbar/base/AlignCenter.vue";
import AlignRight from "../../../menus/toolbar/base/AlignRight.vue";
import AlignJustify from "../../../menus/toolbar/base/AlignJustify.vue";
import AlignDistributed from "../../../menus/toolbar/base/AlignDistributed.vue";
import CodeBlock from "../../../menus/toolbar/base/CodeBlock.vue";
import Blockquote from "../../../menus/toolbar/base/Blockquote.vue";
import Heading from "../../../menus/toolbar/base/Heading.vue";
import Link from "../../../menus/toolbar/base/Link.vue";
import HorizontalRule from "../../../menus/toolbar/base/HorizontalRule.vue";
import Code from "../../../menus/toolbar/base/Code.vue";
import ImportWord from "../../../menus/toolbar/base/ImportWord.vue";
import ExportWord from "../../../menus/toolbar/base/ExportWord.vue";
import PageBreak from "../../../menus/toolbar/page/PageBreak.vue";
import PageMargin from "../../../menus/toolbar/page/PageMargin.vue";
import PageSize from "../../../menus/toolbar/page/PageSize.vue";
import PageOrientation from "../../../menus/toolbar/page/PageOrientation.vue";
import PageBackground from "../../../menus/toolbar/page/PageBackground.vue";
import PageWatermark from "../../../menus/toolbar/page/PageWatermark.vue";
import InsertTable from "../../../menus/toolbar/table/InsertTable.vue";
import AddRowBefore from "../../../menus/toolbar/table/AddRowBefore.vue";
import AddRowAfter from "../../../menus/toolbar/table/AddRowAfter.vue";
import DeleteRow from "../../../menus/toolbar/table/DeleteRow.vue";
import AddColumnBefore from "../../../menus/toolbar/table/AddColumnBefore.vue";
import AddColumnAfter from "../../../menus/toolbar/table/AddColumnAfter.vue";
import DeleteColumn from "../../../menus/toolbar/table/DeleteColumn.vue";
import DeleteTable from "../../../menus/toolbar/table/DeleteTable.vue";
import MergeCells from "../../../menus/toolbar/table/MergeCells.vue";
import SplitCells from "../../../menus/toolbar/table/SplitCells.vue";
import CellBackgroundColor from "../../../menus/toolbar/table/CellBackgroundColor.vue";
import CellTextColor from "../../../menus/toolbar/table/CellTextColor.vue";
import CellAlign from "../../../menus/toolbar/table/CellAlign.vue";
import Comment from "../../../menus/toolbar/base/Comment.vue";
import TableOfContents from "../../../menus/toolbar/reference/TableOfContents.vue";

defineOptions({
  name: "RibbonToolbar",
});

const props = defineProps<{
  activeTab?: string;
  currentMode?: "simple" | "ribbon";
}>();

const emit = defineEmits<{
  (e: "tab-change", tabId: string): void;
  (e: "mode-change", mode: "simple" | "ribbon"): void;
}>();

// 当前模式
const currentMode = computed(() => props.currentMode || "ribbon");

// 处理模式切换
const handleModeChange = (mode: "simple" | "ribbon") => {
  emit("mode-change", mode);
};

// 标签页配置
const tabsAsItems = computed<TabItem[]>(() =>
  TOOLBAR_TABS.map((tab) => ({
    label: tab.label,
    name: tab.name,
    disabled: tab.disabled ?? false,
  }))
);

// 当前激活的标签页
const activeTabId = ref<string | number>(props.activeTab || "home");

// 处理标签页切换
const handleTabChange = (name: string | number) => {
  activeTabId.value = name as string;
  emit("tab-change", name as string);
};
</script>

<style scoped>
.toolbar-ribbon {
  background: var(--editor-color-white);
  border-bottom: 1px solid var(--editor-border-color);
  box-shadow: var(--editor-shadow);
}

.ribbon-content {
  display: flex !important; /* 使用 !important 确保样式不被覆盖 */
  flex-direction: row !important; /* 明确指定水平方向 */
  align-items: center; /* 改为顶部对齐，避免不同高度的组垂直居中导致视觉上的堆叠 */
  gap: 0;
  padding: 8px 12px;
  min-height: 56px;
  flex-wrap: nowrap !important; /* 确保不换行 */
  overflow-x: auto;
  background: var(--editor-color-white);
}

.ribbon-group {
  display: flex !important; /* 使用 !important 确保样式不被覆盖 */
  flex-direction: row !important; /* 明确指定水平方向 */
  align-items: flex-start; /* 改为顶部对齐 */
  padding: 0 8px; /* 增加左右内边距 */
  margin: 0;
  flex-shrink: 0; /* 防止收缩 */
  width: auto; /* 根据内容自动调整宽度 */
  position: relative; /* 用于分割线定位 */
}

.ribbon-group-with-divider::after {
  content: "";
  position: absolute;
  right: 0; /* 分割线位于右侧 padding 边缘 */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 90%; /* 分割线高度为组的 90% */
  background: var(--editor-border-color-light);
}

.ribbon-mode-switcher {
  margin-left: auto;
}

.ribbon-group-content {
  display: flex;
  flex-direction: row; /* 明确指定水平方向 */
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  width: fit-content;
  min-width: auto;
}

.ribbon-group-grid {
  display: grid;
  gap: 0;
  align-items: center;
  justify-items: center;
  grid-auto-flow: row;
  width: fit-content;
  min-width: auto;
}

.ribbon-group-columns {
  display: flex !important; /* 使用 !important 确保样式不被覆盖 */
  flex-direction: column !important; /* 列容器垂直排列 */
  align-items: flex-start;
  gap: 4px;
  width: fit-content;
  min-width: auto;
}

.ribbon-group-column {
  display: flex !important;
  flex-direction: row !important; /* 列内按钮水平排列 */
  align-items: center;
  gap: 0;
  width: fit-content;
  min-width: auto;
}

.ribbon-group-divider {
  width: 1px;
  height: 100%; /* 使用百分比高度，自动适应父容器 */
  background: var(--editor-border-color-light);
  margin: 0 8px;
  flex-shrink: 0;
  align-self: stretch; /* 拉伸以适应容器高度 */
}

/* 滚动条样式 */
.ribbon-content::-webkit-scrollbar {
  height: 6px;
}

.ribbon-content::-webkit-scrollbar-track {
  background: transparent;
}

.ribbon-content::-webkit-scrollbar-thumb {
  background: var(--editor-border-color);
  border-radius: 3px;
}

.ribbon-content::-webkit-scrollbar-thumb:hover {
  background: var(--editor-border-color-dark);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .ribbon-content {
    padding: 5px 6px;
    min-height: 48px;
  }

  .ribbon-group {
    padding: 2px 4px;
  }

  .ribbon-group-divider {
    margin: 0 4px;
    height: 24px;
  }
}

@media (max-width: 768px) {
  .ribbon-content {
    padding: 4px 4px;
    min-height: 44px;
  }

  .ribbon-group {
    padding: 1px 3px;
  }

  .ribbon-group-divider {
    margin: 0 3px;
    height: 20px;
  }
}
</style>
